<template>
    <div class="container">
        <div class="row">
            <div class="col-8">
                <Form class="mt-4" :model="user" label-position="top">
                    <FormItem label="用户名">
                        <Input v-model="user.name" placeholder="请输入用户名"></Input>
                    </FormItem>

                    <FormItem label="电子邮件">
                        <Input type='email' v-model="user.email" placeholder="请输入电子邮件"></Input>
                    </FormItem>
                    <FormItem label="密码">
                        <Input type="password" v-model="user.password" placeholder="请输入密码"></Input>
                    </FormItem>
                    <FormItem label="角色">
                        <Select
                                v-model="selectedRoles"
                                multiple
                                filterable
                                remote
                                :remote-method="searchRole"
                                :loading="loading">
                            <Option v-for="(option, index) in roles" :value="option.name" :key="index">{{option.name}}</Option>
                        </Select>
                    </FormItem>
                </Form>
            </div>
            <div class="col-4">
                <div class="card">
                    <div class="card-body">
                        <img style="width:180px;height:180px" :src="avatarUrl"/>
                        <Upload class="mt-2" :on-success='uploadSuccess'  :on-error='uploadError' action="http://admin.io/api/file">
                            <Button icon="ios-cloud-upload-outline">选择头像</Button>
                        </Upload>
                    </div>
                </div>
            </div>
        </div>
        <Button @click="create">保存</Button>
    </div>
</template>

<script>
    export default {
        name: "UserCreate",
        mounted() {
            this.getRoles();
        },
        methods: {

            getRoles() {
                http.get('/api/role').then((data)=> {
                    console.log(data);
                    this.roles = data;
                });
            },
            searchRole(key) {

            },
            create() {
                let params = new URLSearchParams();
                params.append('name',this.user.name);
                params.append('email',this.user.email);
                params.append('password',this.user.password);
                params.append('roles',JSON.stringify(this.selectedRoles));
                params.append('avatar',this.avatar);
                http.post('/api/user',params).then((data)=>{
                    console.log(data);
                });
            },
            uploadSuccess(event, file, fileList) {
                this.avatar = file.response;
                this.avatarUrl = "http://admin.io/storage/"+this.avatar;
                console.log(this.avatarUrl)

            },
            uploadError(event, file, fileList) {

                console.log('-----+++++')
            }
        },
        data() {
            return {
                avatar:'',
                avatarUrl:'',
                loading: false,
                selectedRoles: [],
                roles: [],
                user: {}
            }
        }
    }
</script>

<style scoped>

</style>
